<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>钻石之家---登录</title>
</head>
<body>
{:widget('Cate/header')}
<div class="breadcrumbs">
    <div class="container_12">
        <div class="grid_12">
            <a href="index.html">Home</a><span></span><a href="#">Category</a><span></span><span class="current">This page</span>
        </div><!-- .grid_12 -->
    </div><!-- .container_12 -->
</div><!-- .breadcrumbs -->

<section id="main" class="page-login">
    <div class="container_12">
        <div id="content" class="grid_12">
            <article>
                <div class="grid_6 new_customers">
                    <h2>新用户</h2>
                    <p>通过在我们的商店中创建帐户，您将能够更快地完成结帐流程，并且可以存储多个地址。在您的个人中心中可以查看和跟踪您的订单等等。</p>
                    <div class="clear"></div>
                    <a href="{:url('/home/login/create')}"><button class="account">创建新用户</button></a>
                </div><!-- .grid_6 -->

                <div class="grid_6 registed_form">
                    <form class="registed layui-form" >
                        <h2>登录</h2>
                        <p>如您已有用户，请登录</p>
                        <div class="user_name">
                            <strong>用户名:</strong><sup>*</sup><br>
                            <input type="text" name="user_name" id="user_name" class="" value="" placeholder="请输入用户名" >
                        </div><!-- .email -->
                        <div class="password">
                            <strong>密码:</strong><sup>*</sup><br>
                            <input type="password" name="user_pass" class="" value="" placeholder="请输入密码">
                        </div><!-- .password -->

                        <div class="remember">
                            <input type="checkbox" name="remember" title="记住密码" lay-skin="primary">
                        </div><!-- .remember -->
                        <div class="submit">
                            <input type="submit" value="登录" id="formDemo" lay-submit lay-filter="formDemo"  >
                            <a class="forgot" href="#">忘记密码?</a>
                        </div><!-- .submit -->
                    </form><!-- .registed -->
                </div><!-- .grid_6 -->
            </article>

            <div class="clear"></div>
        </div><!-- #content -->

        <div class="clear"></div>
    </div><!-- .container_12 -->
</section><!-- #main -->
<div class="clear"></div>

<!--用ajax来进行登录-->

<script>
    layui.use(['form','layer'], function(){
        //表单
        var form = layui.form;
        //弹窗
        var layer = layui.layer;
        var flag=false;
        //用户用户名的tips的提示
        $('#user_name').blur(function(data) {
            var name=$(this).val();
            if(name.length < 5 || name.length > 12){
                layer.tips('用户名长度为5-12个字符', '#user_name',{
                    tips: [1, '#3595CC'],
                    time: 4000
                });
                flag=false;
            }else{
                flag=true;
            }
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            //提交的时候也调用一次检测用户名的函数
            if(!flag){
                //如果不正确就再次触发失去焦点事件
                $("#user_name").trigger("blur");
            }else{
                //进行验证成功后的提交
                $.ajax({
                    type: 'post',
                    dataType: "json",
                    data:data.field,
                    url: '{:url("/home/login/login")}',
                    success: function (data) {
                        if (data.status == 0){
                            layer.msg(data.msg, {icon: 6,time:1000}, function () {
                                //后期修改 可用跳转到首页 也可以跳转到上一步
                                location.href='/';
                                /* var index = parent.layer.getFrameIndex(window.name);
                                 parent.location.reload(); //刷新父页面
                                 parent.layer.close(index);*/
                            });
                        }else{
                            layer.msg(data.msg, {icon: 5});
                        }
                    },
                    error: function (XmlHttpRequest, textStatus, errorThrown) {
                    }
                });
            }
            return false;
        });

    });
   /* $("#btn").click(function(){
        var phone=$(this).parents('form').find('name="phone_code"').val();
        o=$(this);
        m=180;
        $.post('./PhpDemo/index.php',{phone:phone},function(data){
            JSON.parse(data,function(k,v){
                console.log(v);
                for(var i=0;i<v.length;i++){
                    if(i==0){
                        if(v == '000000'){
                            mytime=setInterval(function(){
                                m--;
                                o.html(m+'秒后重新发送');
                                o.attr('disabled',true);
                                if(m==0){
                                    o.html('重新发送');

                                    clearInnterval(mytime);
                                }

                            },1000)

                        }
                    }
                }
            })
        })
    })*/
</script>
{:widget('Cate/footer')}
</body>
</html>
